<template>
  <div class="admin-page">
    <aside class="sidebar">
      <ul>
        <li @click="toggleUsersMenu" :class="{ active: isUsersMenuOpen }">
          用户管理
          <span class="toggle" @click.stop="toggleUsersMenu">▼</span>
        </li>
        <ul v-if="isUsersMenuOpen">
          <li @click="selectSubTab('viewUsers')" :class="{ active: activeSubTab === 'viewUsers' }">查看用户</li>
        </ul>
        <li @click="toggleStoriesMenu" :class="{ active: isStoriesMenuOpen }">
          剧本管理
          <span class="toggle" @click.stop="toggleStoriesMenu">▼</span>
        </li>
        <ul v-if="isStoriesMenuOpen">
          <li @click="selectSubTab('addStory')" :class="{ active: activeSubTab === 'addStory' }">添加剧本</li>
          <li @click="selectSubTab('viewStories')" :class="{ active: activeSubTab === 'viewStories' }">剧本详情</li>
        </ul>
      </ul>
      <router-link to="/" class="home-link">返回主页</router-link>
    </aside>
    <main class="content">
      <!--欢迎界面-->
      <div class="welcome-section" v-if="showWelcome">
        <h1>欢迎来到后台管理系统</h1>
        <p>我们很高兴为你提供管理功能。</p>
      </div>
      <!--查看用户内容区-->
      <div v-if="activeSubTab === 'viewUsers'">
        <h2>查看用户</h2>
        <div>
          <input type="text" v-model="searchQuery" placeholder="按编号/用户名/邮箱查询" @input="filterUsers"
                 style="color: #0a0a0a"/>
        </div>
        <table>
          <thead>
          <tr>
            <th>ID</th>
            <th>用户名</th>
            <th>邮箱</th>
            <th>头像</th>
            <th>注册时间</th>
            <th>最近登录</th>
            <th>状态</th>
            <th>身份</th>
            <th>操作</th> <!-- Add operation column -->
          </tr>
          </thead>
          <tbody>
          <tr v-for="user in paginatedUsers" :key="user.id">
            <td>{{ user.id }}</td>
            <td>{{ user.username }}</td>
            <td>{{ user.email }}</td>
            <td>
              <!--              <img :src="user.avatar || defaultAvatar" alt="用户头像" class="user-avatar"/>-->
              <img
                  :src="user.avatar || defaultAvatar"
                  alt="用户头像"
                  class="user-avatar"

              />
            </td>
            <td>{{ user.createTime }}</td>
            <td>{{ user.lastLogin }}</td>
            <td>{{ user.status }}</td>
            <td>{{ user.role === 'admin' ? '管理员' : '普通用户' }}</td> <!-- Display role -->
            <td>
              <button class="table-button" v-if="user.role === 'user'" @click="promoteUser(user)">升为管理员</button>
              <button class="table-button" v-if="user.role === 'admin'" @click="demoteUser(user)">降为普通用户</button>
              <button class="table-button" @click="deleteUser(user)">注销</button>
            </td>
          </tr>
          </tbody>
        </table>
        <div class="pagination">
          <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
          <span>第 {{ currentPage }} 页，共 {{ totalPages }} 页</span>
          <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
        </div>
      </div>

      <!--用户统计内容区-->
      <!--      <div v-if="activeSubTab === 'userStats'">
              <h2>用户统计</h2>
              <p>注册用户数: {{ userStats.registered }}</p>
              <p>在线用户数: {{ userStats.online }}</p>
            </div>-->

      <!--剧本修改区域-->
      <div v-if="activeSubTab === 'addStory'">
        <form @submit.prevent="addStory">
          <div class="add-script-form">
            <h2>添加剧本</h2>

            <div class="input-group">
              <label for="title">标题</label>
              <input type="text" id="title" v-model="title" placeholder="请输入标题" required/>
            </div>

            <div class="input-group">
              <label for="content">内容</label>
              <input type="text" id="content" v-model="content" placeholder="请输入内容" required/>
            </div>

            <div class="input-group">
              <label for="tags">标签</label>
              <input type="text" id="tags" v-model="tags" placeholder="请输入标签" required/>
            </div>

            <!--角色部分-->
            <div class="characters-section">
              <h3>角色</h3>
              <table class="character-table">
                <thead>
                <tr>
                  <th>名字</th>
                  <th>描述</th>
                  <th>特点</th>
                  <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(character, index) in characters" :key="index">
                  <td><input type="text" v-model="character.name" placeholder="角色名"/></td>
                  <td><input type="text" v-model="character.description" placeholder="角色描述"/></td>
                  <td><input type="text" v-model="character.traits" placeholder="角色特点"/></td>
                  <td>
                    <button @click="removeCharacter(index)" class="delete-button" v-if="characters.length > 1">删除
                    </button>
                  </td>
                </tr>
                </tbody>
              </table>
              <!--添加角色按钮-->
              <button @click="addCharacter" type="button" class="add-button">添加角色</button>
            </div>

            <!--初始场景部分-->
            <div class="initial-scene-section">
              <h3>初始场景</h3>
              <input type="text" v-model="description" placeholder="请输入初始场景描述"/>
            </div>

            <!--提交按钮-->
            <button type="submit" class="submit-script">提交剧本</button>
          </div>
        </form>
      </div>

      <div v-if="activeSubTab === 'viewStories'">
        <h2>剧本详情</h2>
        <ul class="script-list">
          <li v-for="script in paginateScripts" :key="script.id" class="script-item">
            <div class="script-header">
              <h3 class="script-title">{{ script.title }}</h3>
            </div>
            <!-- 剧本内容模块 -->
            <p class="script-content">{{ script.content }}</p>
            <button @click="editContentFunc" class="edit-button">编辑剧本</button>
            <div class="script-details">
              <!--角色描述模块 -->
              <div class="characters-section">
                <h4>角色</h4>
                <div v-for="character in roles" :key="character.id" class="character-item">
                  <h5>{{ character.name }}</h5>
                  <p><strong>描述:</strong> {{ character.description }}</p>
                  <p><strong>特点:</strong> {{ character.traits }}</p>
                </div>
                <button @click="editRolesFunc" class="edit-button">编辑角色</button>
              </div>

              <!-- 初始场景模块 -->
              <div class="initial-scene-section">
                <h4>初始场景</h4>
                <div class="scene-item">
                  <p><strong>场景描述:</strong> {{ this.scene.description }}</p>
                </div>
                <button @click="editSceneFunc" class="edit-button">编辑场景</button>
                <button @click="showUploadImage=true" class="edit-button">上传剧本图片</button>
              </div>
            </div>

            <div class="script-tags-container">
              <span class="script-tag">{{ script.tags }}</span>
            </div>

            <!-- 详情面下方保存所有修改的按钮 -->
            <div class="button-container">
              <button @click="saveAllChanges" class="edit-button">保存所有修改</button>
              <button @click="showDeleteModal = true" class="delete-script-button">删除剧本</button>
            </div>
          </li>
        </ul>

        <div class="pagination">
          <button @click="prevScriptPage" :disabled="scriptPage === 1">上一页</button>
          <span>第 {{ scriptPage }} 页，共 {{ totalScriptPages }} 页</span>
          <button @click="nextScriptPage" :disabled="scriptPage === totalScriptPages">下一页</button>
        </div>
        <!-- 模态框，用于编辑 -->
        <div v-if="showContentModal" class="modal">
          <div class="modal-content">
            <span class="close" @click="closeModal">&times;</span>
            <h2>编辑内容</h2>
            <form @submit.prevent="saveContent">
              <label for="content">剧本内容:</label>
              <textarea v-model="editContent" class="input-textarea"></textarea>
              <button type="submit" class="save-button">保存更改</button>
            </form>
          </div>
        </div>
        <div v-if="showSceneModal" class="modal">
          <div class="modal-content">
            <span class="close" @click="closeModal">&times;</span>
            <h2>编辑场景</h2>
            <form @submit.prevent="saveScene">
              <label for="content">场景内容:</label>
              <textarea v-model="editScene" class="input-textarea"></textarea>
              <button type="submit" class="save-button">保存更改</button>
            </form>
          </div>
        </div>
        <div v-if="showRolesModal">
          <div class="modal-overlay"></div>
          <div class="role-modal">
            <!-- 角色部分 -->
            <div class="edit-characters-section">
              <span class="close" @click="closeModal">&times;</span>
              <h3>角色</h3>
              <table class="edit-character-table">
                <thead>
                <tr>
                  <th>名字</th>
                  <th>描述</th>
                  <th>特点</th>
                  <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(character, index) in editRoles" :key="index">
                  <td><input type="text" v-model="character.name" placeholder="角色名"/></td>
                  <td><input type="text" v-model="character.description" placeholder="角色描述"/></td>
                  <td><input type="text" v-model="character.traits" placeholder="角色特点"/></td>
                  <td>
                    <button @click="edit_removeCharacter(index)" class="delete-button" v-if="editRoles.length > 1">删除
                    </button>
                  </td>
                </tr>
                </tbody>
              </table>
              <!-- 添加角色按钮 -->
              <button @click="edit_addCharacter" type="button" class="add-button">添加角色</button>
            </div>
            <button @click="saveRoles" type="button" class="save-button">保存角色</button>
          </div>
        </div>
        <!-- 删除确认模态框 -->
        <div v-if="showDeleteModal" class="delete-modal-overlay">
          <div class="modal-content">
            <span class="close" @click="showDeleteModal = false">&times;</span>
            <h3>确认删除</h3>
            <p>你确定要删除这个剧本吗？此操作不可撤销。</p>
            <button @click="deleteScript" class="confirm-button">确认删除</button>
            <button @click="showDeleteModal = false" class="cancel-button">取消</button>
          </div>
        </div>
        <div v-if="showUploadImage" class="delete-modal-overlay">
          <div class="box">
            <img :src="previewUrl||defaultImage" alt="背景图片" class="large-avatar" />
            <h2>上传剧本背景图片</h2>
            <form @submit.prevent="uploadImage">
              <div class="input-upload">
                <label class="upload-label">
                  <input type="file" @change="handleFileChange" accept="image/jpeg, image/png" class="file-input"/>
                  选择背景图片
                </label>
              </div>
              <div class="buttons">
                <button class="return-btn" @click="showUploadImage=false">返回</button>
                <button type="submit" class="edit-btn">修改</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>


<script>
import {
  userInfoService,
  userSelectAllService,
  userChangeRoleService,
  userDeleteService
} from "@/api/user"; // Make sure to import the update service
import defaultAvatar from "@/assets/default-avatar.png";
import defaultImage from "@/assets/default-image.jpg";
import {
  addScriptService,
  getScriptByAuthor,
  updateScriptsService,
  updateSceneService,
  updateRoleService,
  deleteSceneService,
  deleteRoleService,
  deleteScriptService,
  getRolesByScriptIdService,
  getScenesByScriptIdService,
  addRoleService,
  addSceneService,
  uploadImageService
} from "@/api/script";
import request from "@/utils/request";

export default {
  name: "Admin",
  data() {
    return {
      isUsersMenuOpen: false,
      isStoriesMenuOpen: false,
      activeSubTab: "viewUsers", // 默认选中查看用户
      userList: [],
      filteredUsers: [],
      currentPage: 1,
      pageSize: 10,
      userStats: {registered: 0, online: 0},
      searchQuery: "",
      defaultAvatar: defaultAvatar,
      title: "", // 新上传剧本的名
      content: "", // 新上传剧本的内容
      tags: "", // 新上传剧本的标签
      scripts: [], // 当前用户的的所有剧本
      scriptPage: 1,// 当前剧本页
      scriptPageSize: 1,//一页一个
      roles: [], // 剧本角色
      scene: "", // 查看剧本时的当前场景
      description: "", // 增加场景时的接收变量
      characters: [
        {name: '', description: '', traits: ''}
      ], // 新增加剧本的角色
      showContentModal: false, // 是否显示修改内容界面
      showRolesModal: false,// 是否显示修改角色界面
      showSceneModal: false,// 是否显示修改场景界面
      editContent: "", // 修改内容
      editScene: "",// 修改场景
      editRoles: [],// 修改角色
      showDeleteModal: false,
      showUploadImage: false,
      showWelcome: true,
      selectedFile: null,       // 用于存储选择的文件
      previewUrl: null,          // 用于预览的临时 URL
      defaultImage:defaultImage
    };
  },
  mounted() {
    this.enterAdminInterface();
  },
  computed: {
    paginatedUsers() {
      const start = (this.currentPage - 1) * this.pageSize;
      return this.filteredUsers.slice(start, start + this.pageSize);
    },
    totalPages() {
      return Math.ceil(this.filteredUsers.length / this.pageSize);
    },
    paginateScripts() {
      const start = (this.scriptPage - 1) * this.scriptPageSize;
      return this.scripts.slice(start, start + this.scriptPageSize);
    },
    totalScriptPages() {
      return Math.ceil(this.scripts.length / this.scriptPageSize);
    },
  },
  watch: {
    // 监听 paginateScripts 变化，当变化时设置角色和场景
    paginateScripts: {
      async handler(newScripts) {
        if (newScripts.length > 0) {
          // console.log(newScripts[0]);
          let response = await getRolesByScriptIdService(newScripts[0].id);
          this.roles = response.data;
          // console.log(this.roles);
          let scene_response = await getScenesByScriptIdService(newScripts[0].id);
          //console.log(newScripts[0].id)
          // console.log(scene_response.data)
          this.scene = scene_response.data
          // console.log(this.scene);
        }
      },
      immediate: true // 立即调用这个监听器
    }
  },
  methods: {
    enterAdminInterface() {
      this.showWelcome = true; // 进入管理员界面时显示欢迎页面
      this.isUsersMenuOpen = false;
      this.isStoriesMenuOpen = false;
      this.activeSubTab = "";
    },
    toggleUsersMenu() {
      this.isUsersMenuOpen = !this.isUsersMenuOpen;
      this.showWelcome = false; //切换菜单是隐藏欢迎界面
    },
    toggleStoriesMenu() {
      this.isStoriesMenuOpen = !this.isStoriesMenuOpen;
      this.showWelcome = false;
    },
    selectSubTab(tab) {
      this.activeSubTab = tab;
      if (tab === "viewUsers") {
        this.fetchUsers();
      } else if (tab === "userStats") {
        this.fetchUserStats();
      } else if (tab === "viewStories") {
        this.viewStories();
      }
      this.showWelcome = false;
    },
    async fetchUsers() {
      const result = await userSelectAllService();
      if (result.code === "0") {
        this.userList = result.data;
        this.filteredUsers = result.data;
        // 处理头像加载
        for (let user of this.filteredUsers) {
          if (user.avatar) {
            try {
              const response = await request.get(user.avatar, {
                responseType: "blob"
              });
              // 将 Blob 数据转换为 URL
              user.avatar = URL.createObjectURL(response);
            } catch (error) {
              console.error("Failed to load avatar image for user:", user.username, error);
            }
          } else {
            // 设置为默认头像
            user.avatarUrl = defaultAvatar;
          }
        }
      } else {
        alert(result.message ? result.message : "获取用户信息失败！");
      }
    },
    filterUsers() {
      this.currentPage = 1;
      const query = this.searchQuery.toLowerCase();
      this.filteredUsers = this.userList.filter(user => {
        return (
            user.id.toString().includes(query) ||
            user.username.toLowerCase().includes(query) ||
            user.email.toLowerCase().includes(query)
        );
      });
    },
    async promoteUser(user) {
      const result = await userChangeRoleService(user.id, 'admin');
      if (result.code === "0") {
        user.role = 'admin';
        alert("用户已升为管理员");
      } else {
        alert(result.message ? result.message : "升为管理员失败！");
      }
    },
    async demoteUser(user) {
      const result = await userChangeRoleService(user.id, 'user');
      if (result.code === "0") {
        user.role = 'user';
        alert("用户已降为普通用户");
      } else {
        alert(result.message ? result.message : "降为普通用户失败！");
      }
    },
    async deleteUser(user) {
      const result = await userDeleteService(user.id);
      if (result.code === "0") {
        alert("操作成功");
        this.fetchUsers();
      } else {
        alert(result.message ? result.message : "操作失败！");
      }
    },

    fetchUserStats() {
      this.userStats = {registered: 100, online: 20};
    },
    async addStory() {
      try {
        const user = await userInfoService();
        // console.log(user);
        const newStory = {
          title: this.title,
          author: user.data.username,
          content: this.content,
          tags: this.tags
        };
        const new_script = await addScriptService(newStory.title, newStory.author, newStory.content, newStory.tags);
        // console.log(new_script);
        for (const character of this.characters) {
          await addRoleService(new_script.data.id, character.name, character.description, character.traits);
        }
        //console.log(this.description);
        //console.log(new_script.data.id)
        await addSceneService(new_script.data.id, this.description);
        //console.log('剧本添加成功');
        alert("剧本添加成功")
        // 清空表单数据
        this.title = '';
        this.content = '';
        this.tags = '';
        this.description = '';
        this.characters = [
          {name: '', description: '', traits: ''}
        ];
      } catch (error) {
        console.log('剧本添加失败');
        console.error('添加剧本时发生错误:', error);
      }
    },
    async viewStories() {
      try {
        const user = await userInfoService();
        const response = await getScriptByAuthor(user.data.username);
        // console.log(response)
        this.scripts = response.data;
        // console.log(this.scripts);
        console.log('剧本加载成功');
      } catch (error) {
        console.log('加载剧本失败');
        console.error('加载剧本时发生错误:', error);
      }
    },
    async editScript() {

    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
      }
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    },
    nextScriptPage() {
      if (this.scriptPage < this.totalScriptPages) {
        this.scriptPage++;
      }
    },
    prevScriptPage() {
      if (this.scriptPage > 1) {
        this.scriptPage--;
      }
    },
    // 添加角色
    addCharacter() {
      this.characters.push({name: '', description: '', traits: ''});
    },
    edit_addCharacter() {
      this.editRoles.push({name: '', description: '', traits: ''});
    },
    // 删除角色
    removeCharacter(index) {
      this.characters.splice(index, 1);
    },
    // 删除角色
    edit_removeCharacter(index) {
      this.editRoles.splice(index, 1);
    },

    // 打开编辑剧本内容的模态框
    editContentFunc() {
      this.editContent = this.paginateScripts[0].content;
      this.showContentModal = true;
    },
    saveContent() {
      // 保存修改后的内容
      this.paginateScripts[0].content = this.editContent;
      this.closeModal();
    },
    editRolesFunc() {
      this.showRolesModal = true;
      this.editRoles = JSON.parse(JSON.stringify(this.roles)); // 深拷贝
    },
    saveRoles() {
      // Update the local roles state
      this.roles = JSON.parse(JSON.stringify(this.editRoles));
      // Close the modal
      this.closeModal();
    },
    editSceneFunc() {
      //console.log(this.scene)
      this.editScene = this.scene.description;
      this.showSceneModal = true;
    },
    saveScene() {
      // 保存修改后的内容
      this.scene.description = this.editScene;
      this.closeModal();
    },
    // 关闭模态框
    closeModal() {
      this.showContentModal = false;
      this.showRolesModal = false;
      this.showSceneModal = false
    }
    ,

    // 保存所有修改
    async saveAllChanges() {
      // 这里可以将数据保存到服务器
      // 更新剧本内容
      await updateScriptsService(
          this.paginateScripts[0].id,
          this.paginateScripts[0].author,
          this.paginateScripts[0].content,
          this.paginateScripts[0].tags);
      // console.log('保存的剧本信息：', this.paginateScripts);
      // 更新角色信息
      // 拿到数据库中的角色信息
      const response = await getRolesByScriptIdService(this.paginateScripts[0].id);
      const data_roles = response.data

      // 创建数据库角色映射以便快速查找
      const dataRolesMap = new Map();
      data_roles.forEach(role => {
        dataRolesMap.set(role.id, role);
      });
      // 需要进行的操作集合
      const rolesToUpdate = [];
      const rolesToAdd = [];
      const rolesToDelete = new Set(dataRolesMap.keys());

      // 遍历前端的角色列表
      this.roles.forEach(role => {
        if (!role.name && !role.description && !role.traits) {
          // 如果角色所有字段为空，忽略该角色
          return;
        }

        if (role.id && dataRolesMap.has(role.id)) {
          // 如果角色存在于数据库中，检查是否需要更新
          const existingRole = dataRolesMap.get(role.id);
          if (
              role.name !== existingRole.name ||
              role.description !== existingRole.description ||
              role.traits !== existingRole.traits
          ) {
            // 如果前端的数据和数据库的数据不同，添加到更新集合
            rolesToUpdate.push(role);
          }
          // 从删除集合中移除，因为前端有这个角色，表示它不应被删除
          rolesToDelete.delete(role.id);
        } else if (!role.id) {
          // 如果角色没有 id，表示是新加的角色
          rolesToAdd.push(role);
        }
      });
      // 更新角色
      for (const role of rolesToUpdate) {
        await updateRoleService(role.id, this.paginateScripts[0].id, role.name, role.description, role.traits);
      }

      // 删除角色
      for (const roleId of rolesToDelete) {
        await deleteRoleService(roleId);
      }

      // 新增角色
      for (const role of rolesToAdd) {
        await addRoleService(this.paginateScripts[0].id, role.name, role.description, role.traits);
      }
      // 更新场景今夕信息
      await updateSceneService(this.scene.id, this.scene.description);
      // console.log(this.scene.id,this.scene.description)
      alert('所有修改已保存！');
    },
    async deleteScript() {
      // 执行删除逻辑
      // 删除角色
      const response_2 = await getRolesByScriptIdService(this.paginateScripts[0].id);
      const data_roles = response_2.data
      for (const role of data_roles) {
        await deleteRoleService(role.id);
      }
      // 删除场景
      await deleteSceneService(this.scene.id)
      // 删除剧本
      await deleteScriptService(this.paginateScripts[0].id)
      //console.log("剧本已删除");
      this.showDeleteModal = false; // 关闭模态框
      const user = await userInfoService();
      const response = await getScriptByAuthor(user.data.username);
      // console.log(response)
      // 更新作者剧本
      this.scripts = response.data;
      if (this.scriptPage > 1) {
        this.scriptPage--;
      }
    },
    handleFileChange(event) {
      const file = event.target.files[0];
      if (file) {
        this.selectedFile = file; // 保存选择的文件
        this.previewUrl = URL.createObjectURL(file); // 创建预览 URL
      }
    },
    async uploadImage() {
      console.log("上传图片")
      if (!this.selectedFile) {
        alert("请先选择并上传背景");
        return;
      }
      const formData = new FormData();
      formData.append("id", this.paginateScripts[0].id)
      formData.append("image", this.selectedFile);

      // 打印 FormData 内容，确认文件已添加
      for (let pair of formData.entries()) {
        console.log(pair[0] + ', ' + pair[1]);
      }
      try {
        console.log(formData.get("id"))
        let result = await uploadImageService(formData);
        if (result.code === "0") {
          alert("背景更新成功！");
        } else {
          alert(result.message ? result.message : "背景更新失败");
        }
      } catch (error) {
        alert("上传失败：" + error.message);
      }
      this.showUploadImage=false
    },
  },
}
;
</script>


<style scoped>
.welcome-section {
  text-align: center;
  margin-top: 50px;
}

.welcome-section h1 {
  font-size: 4rem;
  color: #f8d800;
}

.welcome-section p {
  font-size: 2.4rem;
  color: #f8d800;
}

.admin-page {
  display: flex;
  height: 150vh;
  background-color: #1c1c1c;
  color: #fff;
}

.sidebar {
  width: 200px;
  background-color: #272727;
  padding: 15px 0;
}

.sidebar ul {
  list-style: none;
  padding: 0;
}

.sidebar li {
  padding: 10px 15px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.sidebar li:hover {
  background-color: #444;
}

.sidebar li.active {
  background-color: #007bff;
}

.toggle {
  float: right;
  cursor: pointer;
}

.home-link {
  display: block;
  padding: 10px 15px;
  color: #fff;
  text-decoration: none;
  background-color: #3a3a3a;
  text-align: center;
  margin-top: auto;
}

.home-link:hover {
  background-color: #007bff;
  color: #fff;
  margin-top: auto;
}

.content {
  flex-grow: 1;
  padding: 20px;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

th,
td {
  padding: 5px;
  border: 1px solid #fff;
  text-align: center;
}

th {
  background-color: #444;
}

.table-button {
  padding: 5px 15px;
  border-radius: 10px;
  background-color: #ffcd00;
  color: #000;
}

.user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.pagination {
  margin-top: 10px;
}

.pagination button {
  margin: 0 5px;
  padding: 5px 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  cursor: pointer;
}

.pagination button:disabled {
  background-color: #444;
  cursor: not-allowed;
}

.input-group {
  margin-bottom: 15px;
}

.input-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.input-group input {
  width: 30%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
  transition: border-color 0.3s;
}

.input-group input:focus {
  border-color: #007bff;
  outline: none;
}

.submit_script {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.submit_script:hover {
  background-color: #0056b3;
}

/* 美化输入框 */
input[type="text"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  font-size: 16px;
  border-radius: 5px;
  border: 1px solid #ccc;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* 每个剧本项的样式 */
.script-item {
  background-color: #333; /* 背景深色 */
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 10px;
  color: #fff; /* 白色文字 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); /* 阴影效果 */
}

/* 剧本标题和修改按钮的容器 */
.script-header {
  display: flex;
  justify-content: space-between; /* 标题和按钮两边对齐 */
  align-items: center;
}

/* 剧本标题 */
.script-title {
  font-size: 24px;
  color: #6dd3c6; /* 使用亮绿色，使标题显眼 */
  margin: 0;
}

.button-container {
  display: flex;
  justify-content: center;
  gap: 15px;
}

/* 修改按钮样式 */
.edit-button {
  padding: 10px 20px;
  font-size: 16px;
  color: #ffffff;
  background-color: #4CAF50;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
  margin-right: 10px; /* 添加右侧外边距 */
}

.edit-button:hover {
  background-color: #e67e22; /* 鼠标悬停时变暗 */
}

/* 剧本内容样式 */
.script-content {
  font-size: 18px;
  line-height: 1.6;
  margin-top: 15px;
}

/* 剧本详情（角色和初始场景）的样式 */
.script-details {
  margin-top: 15px;
  font-size: 16px;
  line-height: 1.5;
}

/* 标签容器 */
.script-tags-container {
  margin-top: 20px;
  display: flex;
  gap: 10px; /* 标签之间的间距 */
  text-align: center;
}

/* 每个标签的样式 */
.script-tag {
  background-color: #6c757d; /* 深灰色背景 */
  color: #f1c40f; /* 橙黄色文字 */
  padding: 6px 10px;
  border-radius: 12px; /* 圆角样式 */
  font-size: 14px;
  font-weight: bold;
}

/* 整个角色和初始场景的区域 */
.script-details {
  margin-top: 20px;
  display: flex;
  gap: 40px; /* 分开角色和初始场景区域 */
  flex-wrap: wrap;
}

/* 角色部分和场景部分 */
.characters-section, .initial-scene-section, .edit-characters-section {
  flex: 1;
  margin-top: 15px;
}

/* 角色和场景标题 */
.characters-section h4, .initial-scene-section h4, .edit-characters-section {
  font-size: 20px;
  color: #6dd3c6;
  margin-bottom: 15px;
}

/* 单个角色或场景条目的卡片样式 */
.character-item, .scene-item {
  background-color: #444; /* 使用稍浅的背景色以区分不同的条目 */
  color: #fff;
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); /* 添加阴影使卡片感更强 */
}

/* 角色名字 */
.character-item h5 {
  font-size: 18px;
  color: #f1c40f; /* 让角色名字显得突出 */
  margin-bottom: 10px;
}

/* 文本描述的样式 */
.character-item p, .scene-item p {
  margin: 5px 0;
  line-height: 1.4;
}

/* 表单容器 */
.add-script-form {
  width: 600px;
  margin: 20px auto;
  padding: 20px;
  background-color: #2c2f33; /* 深色背景，增加对比度 */
  color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* 标题 */
.add-script-form h2 {
  text-align: center;
  margin-bottom: 20px;
  color: #1abc9c; /* 亮绿色标题，突出醒目 */
}

/* 输入框和标签的样式 */
.input-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.input-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
}

.input-group input[type="text"] {
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #444;
  background-color: #444;
  color: #fff;
  font-size: 16px;
}

/* 角色表格 */
.character-table {
  width: 100%;
  margin-bottom: 15px;
  border-collapse: collapse;
}

/* 编辑角色表格 */
.edit-character-table {
  width: 100%;
  margin-bottom: 15px;
  border-collapse: collapse;
}

.character-table th, .character-table td {
  border: 1px solid #444;
  padding: 10px;
  text-align: left;
}

.character-table th {
  background-color: #444;
  color: #fff;
}

.character-table td input[type="text"] {
  width: 90%;
  padding: 5px;
  border-radius: 3px;
  border: 1px solid #666;
  background-color: #333;
  color: #fff;
}

.edit-character-table th, .edit-character-table td {
  border: 1px solid #444;
  padding: 10px;
  text-align: left;
}

.edit-character-table th {
  background-color: #444;
  color: #fff;
}

.edit-character-table td input[type="text"] {
  width: 90%;
  padding: 5px;
  border-radius: 3px;
  border: 1px solid #666;
  background-color: #333;
  color: #fff;
}

/* 按钮样式 */
.add-button,
.delete-button,
.submit-script {
  padding: 10px 15px;
  margin-top: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

/* 添加角色按钮 */
.add-button {
  background-color: #28a745; /* 绿色背景 */
  color: #fff;
}

.add-button:hover {
  background-color: #218838;
}

/* 删除角色按钮 */
.delete-button {
  background-color: #dc3545; /* 红色背景 */
  color: #fff;
}

.delete-button:hover {
  background-color: #c82333;
}

/* 提交按钮 */
.submit-script {
  background-color: #007bff; /* 蓝色背景 */
  color: #fff;
  width: 100%; /* 全宽按钮 */
  margin-top: 20px;
  font-size: 18px;
}

.submit-script:hover {
  background-color: #0069d9;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6); /* 更深的半透明黑色背景 */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.modal-content {
  background-color: #2b2b2b; /* 深灰色背景，类似于图片中样式 */
  padding: 20px;
  border-radius: 8px;
  width: 80%;
  max-width: 600px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  position: relative;
  color: #ffffff; /* 白色字体，与深色背景对比更强烈 */
}

.close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  font-weight: bold;
  color: #ffffff;
  cursor: pointer;
}

.close:hover {
  color: #ff6b6b; /* 悬停时颜色变为浅红色，增强视觉反馈 */
}

h2 {
  text-align: center;
  font-size: 24px;
  color: #ffffff; /* 标题使用白色字体 */
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 10px;
  font-weight: bold;
  color: #ffffff; /* 标签使用白色字体 */
}

.input-textarea {
  width: 100%;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #444; /* 深灰色边框 */
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
  font-size: 16px;
  margin-bottom: 20px;
  background-color: #3a3a3a; /* 深灰色输入框背景 */
  color: #ffffff; /* 输入文字颜色为白色 */
}

.input-textarea::placeholder {
  color: #aaa; /* 浅灰色的占位符文字 */
}

.save-button {
  display: block;
  width: 100%;
  padding: 10px;
  background-color: #4caf50; /* 使用绿色按钮，提供视觉点缀 */
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.save-button:hover {
  background-color: #45a049;
}

.save-button:active {
  background-color: #3e8e41;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
}

.role-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #2b2b2b; /* 深灰色背景 */
  padding: 20px;
  border-radius: 8px;
  width: 90%;
  max-width: 800px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  color: #ffffff;
  z-index: 10000;
}

.confirm-button {
  background-color: #e74c3c; /* 红色按钮，提示删除操作 */
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  margin-top: 20px;
  transition: background-color 0.3s ease;
}

.confirm-button:hover {
  background-color: #c0392b;
}

.cancel-button {
  background-color: #555; /* 灰色按钮 */
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  margin-top: 20px;
  margin-left: 10px;
  transition: background-color 0.3s ease;
}

.cancel-button:hover {
  background-color: #444;
}

.delete-script-button {
  background-color: #e74c3c; /* 红色背景，提示删除操作 */
  color: #ffffff; /* 按钮文字为白色 */
  border: none;
  border-radius: 8px; /* 圆角按钮 */
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 轻微阴影效果 */
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.delete-script-button:hover {
  background-color: #c0392b; /* 悬停时背景颜色变深 */
  transform: scale(1.05); /* 悬停时按钮稍微放大 */
}

.delete-script-button:active {
  background-color: #a93226; /* 点击时的背景颜色 */
  transform: scale(0.95); /* 点击时按钮缩小，提供反馈 */
}

.delete-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  display: flex;
  justify-content: center; /* 水平方向居中 */
  align-items: center; /* 垂直方向居中 */
}

.box {
  width: 400px;
  padding: 20px;
  background-color: #222;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.input-upload {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}

.upload-label {
  display: inline-block;
  padding: 8px 16px;
  color: #000;
  background-color: #ffcd00;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  transition: background-color 0.3s;
}

.upload-label:hover {
  background-color: #ffcd00;
}

.file-input {
  display: none;
}

.buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.edit-btn, .return-btn {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #ffcd00;
  border: none;
  border-radius: 5px;
  color: #000;
  cursor: pointer;
  width: 45%;
}

.edit-btn:hover, .return-btn:hover {
  background-color: #e5b800;
}
.large-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 10px;
}
</style>


